<template>
    <h2>显示</h2><a href="/">添加</a>
    标题
    <input type="text" v-model="query.biaoti">

    颜色
    <input type="text" v-model="query.yans">
    <input type="button" value="查询" @click="querys">
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>标题</th>
                <th>颜色</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody v-for="a in data">
            <tr>
                <th>{{ a.uid }}</th>
                <th>{{ a.uname }}</th>
                <th>{{ a.pwd }}</th>
                <th>{{ a.telete }}</th>
                <th>{{ a.red }}</th>
                <th>
                    <input type="button" value="删除" @click="deletee(a.uid)">
                </th>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
onMounted(()=>{
    shoow()
})

//删除
const deletee=(val:any)=>{
    axios.delete("https://localhost:7292/api/VS/Delete",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
        alert('删除成功');
        shoow()
    }
    else
    {
        alert('删除失败');
        return;
    }
    })
}

const query=ref({
    biaoti:"",
    yans:""
})

const querys=()=>{
    shoow()
}

const data=ref([{
    "uid": 0,
    "uname": "",
    "pwd": "",
    "telete": "",
    "red": "",
    "deleteId": null
}])

const shoow=()=>{
    axios.get("https://localhost:7292/api/VS/Show",{params:query.value}).then(res=>{
        data.value=res.data;
    })
}
</script>

<style scoped>

</style>